import React, { useState, useEffect } from 'react'
import { Modal, Form, Input, message, Select } from 'antd'
import { getRoleList, addUser, updateUser } from '../../../request/setting'

function EditUser(props) {
  const { visible, close, user } = props
  const { getFieldDecorator, validateFields } = props.form
  const [roleList, setRoleList] = useState([])
  const { Item } = Form

  useEffect(() => {
    getRoleData().catch(e => console.log(e.message))
  }, [])

  const getRoleData = async() => {
    const { code, message: errMsg, data } = await getRoleList({ page: 1, size: 1000 })
    if (code) {
      return message.error(errMsg)
    }
    setRoleList(data.list.filter(item => item.status === 1))
  }

  const onSubmit = () => {
    validateFields(async(err, values) => {
      if (err) {
        return false
      }
      const data = { ...user, ...values }
      const res = data.id ? await updateUser(data) : await addUser(data)
      if (res.code) {
        message.error(res.message)
        return false
      }
      message.success(data.id ? '修改成功' : '添加成功')
      close()
    })
  }

  return (
    <div className="create-customer">
      <Modal
        visible={visible}
        onCancel={close}
        onOk={onSubmit}
        okText="确定"
        cancelText="取消"
        maskClosable={false}
        title={user.id ? '编辑用户' : '添加用户'}
        width="700px"
        closable={false}
      >
        <Form labelCol={{ sm: { span: 6 } }} wrapperCol={{ sm: { span: 18 } }}>
          <Item label="账号">
            {getFieldDecorator('name', {
              initialValue: user.name,
              rules: [
                { required: true, message: '账号不能为空' }
              ]
            })(
              <Input placeholder="请输入姓名"/>
            )}
          </Item>
          <Item label="真实姓名">
            {getFieldDecorator('actual_name', {
              initialValue: user.actual_name,
              rules: [
                { required: true, message: '真实姓名不能为空' }
              ]
            })(
              <Input placeholder="请输入姓名"/>
            )}
          </Item>
          <Item label="密码">
            {getFieldDecorator('password', {
              initialValue: '',
              rules: [
                { required: true, message: '密码不能为空' }
              ]
            })(
              <Input placeholder="请输入密码"/>
            )}
          </Item>
          <Item label="邮箱">
            {getFieldDecorator('email', {
              initialValue: user.email,
              rules: [
                { required: true, message: '邮箱不能为空' }
              ]
            })(
              <Input placeholder="请输入邮箱"/>
            )}
          </Item>
          <Item label="电话">
            {getFieldDecorator('mobile', {
              initialValue: user.mobile,
              rules: [
                { required: true, message: '电话不能为空' }
              ]
            })(
              <Input placeholder="请输入电话"/>
            )}
          </Item>
          <Item label="部门">
            {getFieldDecorator('department', {
              initialValue: user.department,
              rules: [
                { required: true, message: '部门不能为空' }
              ]
            })(
              <Input placeholder="请输入部门"/>
            )}
          </Item>
          <Item label="角色">
            {getFieldDecorator('role_id', {
              initialValue: user.role_id,
              rules: [
                { required: true, message: '角色不能为空' }
              ]
            })(
              <Select placeholder="请选择角色">
                {roleList.map(item => (
                  <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                ))}
              </Select>
            )}
          </Item>
        </Form>
      </Modal>
    </div>
  )
}

export default Form.create()(EditUser)
